<template>
  <div>
    <div class="box" @click="gosearchpage()">
      <i class="iconfont icon-saomiaokuang"></i>
      <p>xxxxxxxxxx</p>
      <div class="search_btn">搜索</div>
    </div>
    <ul v-show="flag">
      <li>周黑鸭</li>
      <li>kFc</li>
      <li>王菊面馆</li>
    </ul>
  </div>
</template>

<script>
export default {
  data() {
    return {
      flag: true,
    };
  },
  mounted: function () {
    window.addEventListener("scroll", this.handleScroll);
  },
  methods: {
    gosearchpage() {
      this.$router.push("/page_search");
    },
    handleScroll() {
      var scrollTop =
        window.pageYOffset ||
        document.documentElement.scrollTop ||
        document.body.scrollTop;
      if (scrollTop > 40) {
        this.flag = false;
      } else {
        this.flag = true;
      }
    },
  },
};
</script>

<style scoped>
.box {
  width: 100%;
  height: 0.36rem;
  border: 0.03rem solid #2aa8e1;
  border-radius: 0.36rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  background-color: #fff;
}
.icon-saomiaokuang {
  font-size: 0.2rem;
  color: #7dcce6;
  margin-left: 0.1rem;
}
p {
  height: 0.2rem;
  width: 2.3rem;
  margin-left: 0.1rem;
  padding-left: 0.1rem;
  border-left: 1px solid #aaaaaa;
  font-size: 0.14rem;
  color: #aaaaaa;
}
.search_btn {
  width: 0.7rem;
  height: 0.32rem;
  background-image: linear-gradient(to right, #28c9ff, #00acf4);

  margin-left: 0.3rem;
  border-radius: 0.2rem;
  font-size: 0.16rem;
  text-align: center;
  line-height: 00.32rem;
  box-shadow: 1px 1px 1px 1px #00acf4;
  color: #fffffd;
}
ul {
  width: 100%;
  height: 0.2rem;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  margin-top: 0.1rem;
  margin-bottom: 0.1rem;
}
li {
  height: 0.2rem;
  border-radius: 0.1rem;
  font-size: 0.12rem;
  background-color: #dddbdb;
  padding-left: 0.1rem;
  padding-right: 0.1rem;
  margin-right: 0.08rem;
  text-align: center;
  line-height: 0.2rem;
  color: #616161;
}
</style>